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Práctica de laboratorio: activación de un LED con Blockly 
Objetivos 


Parte 1: abra Packet Tracer y examine el programa Blockly para hacer parpadear el LED 
Parte 2: controle un LED RGB mediante Blockly 


Aspectos básicos 


Blockly es un lenguaje de programación visual que permite a los usuarios crear programas conectando 
bloques que representan diversas estructuras de lenguaje lógico en lugar de escribir el código real. Blockly 
se ejecuta dentro de un navegador web y puede traducir el programa visualmente creado, como JavaScript, 
PHP o Python. En esta práctica de laboratorio, utilizará Blockly para examinar la programación de Blockly y 
controlar un LED. 


Situación 


Uso de la programación de Blockly para controlar un objeto LED de loT. En esta práctica de laboratorio, se 
usa Cisco Packet Tracer, ya que proporciona soporte para Blockly con objetos de loT. 


Recursos necesarios 


. Cisco Packet Tracer 7.1.1 y versiones superiores están instaladas y 
disponibles. 


Parte 1: Inicie Cisco Packet Tracer (PT) y utilice Blockly 


En la parte 1, accederá al programa Cisco Packet Tracer y examinará el control de LED mediante la 
programación de Blockly. 


Paso 1: Inicie Packet Tracer. 


a. Haga doble clic en el icono de Cisco Packet Tracer para abrir el programa PT. 


isco Packet 
Tracer 


b. Se muestra la interfaz de usuario. 


O 2018 Cisco y/o sus filiales. Todos los derechos reservados. Este documento es información pública de Cisco. Página 1 de 12 


Práctica de laboratorio: activación de un LED con Blockly 


Y Cisco Packet Tracer = o Xx 


File Edit Options View Tools Extensions Help 


Workspace 


Herramientas 


Categoría del dispositivo Subcategoría del dispositivo 


GLL 


2901 2911 81910x SIMHGW 829 1240 4321, Generic 262004 


819HG-4G-10X 


c. Haga clic en la categoría Components (Componentes), y luego haga clic en MCU Board (Placa de MCU) 
y arrástrela al espacio de trabajo. 


Y Cisco Packet Tracer 


File Edit Options View Tools Extensions Help 


Componentes MCU 
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d. Haga clic en la subcategoría Actuators (Actuadores), seleccione LED y arrástrelo al espacio de trabajo 


Y Cisco Packet Tracer 


File Edit Options View Tools Extensions Help 
dr ER 


Subcategoría del actuador 


Oa”: Oma Eoi noo 


e. Haga clic en la categoría Connections (Conexiones), seleccione loT Custom Cable (Cable 
personalizado de loT) para vincular la MCU en el puerto D1 y el LED en el puerto DO. 


Y Cisco Packet Tracer 


File Edit Options View Tools Extensions Help 


Conexiones Cable personalizado de loT 


y Jm 


Z) < 
a loT Custom Cable 
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f. Haga doble clic en la MCU. Se muestra la ventana de configuración. 


Y mecuo 


Specifications Physical Config Programming Attributes 


Add specifications here. 


g. Haga clic en la pestaña Programming (Programación). (Si no ve la pestaña Programming 
[Programación], haga clic en el botón Advanced [Avanzado], que se encuentra en la esquina inferior 
derecha). 


Y mcuo 


Specifications Physical Config Programming Attributes 

No Project Opened 

Open |New| Delete Rename | Import Run Clear Outputs Help 
Blink (JavaScript) 


Paso 2: Examine un programa Blockly creado previamente 


a. Debajo de la nota No Project Opened (No hay proyectos abiertos), haga clic en New (Nuevo). En la 
ventana Create Project (Crear proyecto), ingrese Blinking LED (LED parpadeante) como nombre del 
proyecto. En el menú desplegable Template (Plantilla), seleccione Blink — Visual (Parpadeo: visual). 


Y mcuo 


Specifications Physical Config Programming Attributes 


No Project Opened 
New Delete | Rename mport Run | Clear Outputs | Help 
Blink (JavaScript) 


Create Project 


Enter a project name and select the project type. 


Name: (Blinking LED 


®© Template 


O Global Script Project 
MQTT Broker - (Python) + 


Create Cancel 
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b. Haga clic en Create (Crear). 
Y mcuo 


Specifications Physical Config Programming Attributes 


Blinking LED (Visual) 


| Delete Rename Import 


C. 
Y mcuo 


Specifications Physical Config Programming Attributes 


Blinking LED (Visual) - main.visual 


[Run | | Clear Outputs | | Help | 


Open | | New | | Delete | | Rename | | Import | 


> Program 
Pin Access TI 1 MES OUTPUT y | 
Networking 
print 7 Blinking + 


do ` A 

digitalWrite slot alue 
Email ig 1 sS @ valu EB 
loE Client delay ms 000 
Real HTTP 
Real TCP digitalWrite slot ' | value ' (1) 
Real UDP delay ms 500 
USB G 
Bluetooth 


d. Haga clic en Run (Ejecutar). ¿El LED parpadea? 


[Run | | Clear Outputs | | Help | 


e. Haga clic en Stop (Detener), y cambie el campo Value (Valor) del primer bloque digitalWrite a 1023. 


UOCE 1 MS OUTPUT y | 


print 12 Blinking Ez; 
repeat while » JM true >] 


do | digitalWrite slot |" | value 023 


delay ms 900 


digitalWrite slot | Y | value | (Y 


delay ms 500 
— 


f. Haga clic en Run (Ejecutar). ¿El LED parpadea? 


¿Por qué no parpadeó cuando el valor se estableció en 1023? 
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g. Haga clic en el LED y analice su especificación. 


Y loTO 


Specifications Attributes 


LED 
Standard green LED. 


Features: 


+ Dimmable 
+ Color: Green 
+ High Reliability 


Usage: 


+ Connect to MCU/SBC to Slot 0 
+ Analog input of 1023 is maximum brightest; 0 is off. 


Direct Control: 
. N/A 


Local Control: 


+ Connect device to an MCU. From MCU, use "analogWrite" to adjust 
the device brightness. 


Remote Control: 


h. Indica que podemos utilizar “analogWrite” para ajustar el brillo del dispositivo. Expanda el grupo Pin 


Access (Pin Access (Acceso a Pin)) y utilice el bloque analogWrite para reemplazar el bloque 
digitalWrite. 


A 1 BS OUTPUT > | 
print 2 Blinking + 
epea wie > Jl true > 


do analogWWrite slot | KB | value | V 


delay ms 1000 


analogWrite slot | B| value | (1 


delay ms 500 | 


i 


i. Ahora, cambie los valores del primero y segundo bloque analogWrite, y observe los diferentes niveles 
de brillo de LED. 


O 2018 Cisco y/o sus filiales. Todos los derechos reservados. Este documento es información pública de Cisco. Página 6 de 12 


Práctica de laboratorio: activación de un LED con Blockly 


Parte 2: Controle un LED RGB con Blockly 


En la parte 2, utilizó Blockly para controlar un LED rojo, verde, azul (RGB, red, green, blue). Un indicador 


RGB puede mostrar diferentes colores con la combinación de color rojo, verde y azul. 
Paso 1: Agregue una MCU y un LED RGB. 
En el paso 1, agregó otra placa de MCU y un LED RGB en el espacio de trabajo. 


a. Haga clic la subcategoría Actuators (Actuadores), seleccione RGB LED (LED RGB) y arrástrelo al 
espacio de trabajo. Agregue otra placa de MCU. 


p Cisco Packet Tracer - C\Users\GAI\Documents\NetAcad\Assignment\I2loT\Labs\2.1.2.c PT... 


File Edit Options View Tools Extensions Help 


RGB LED 
IoT3 


Subcategoría del actuador LED RBG 


b. 


(Cable personalizado de loT) para vincular la MCU y el LED RGB. 


È Cisco Packet Tracer - CAUsersiGANDocuments|NetAcadlAssignmentiI2loTlLabs12.1.2.c PT... — mi x 


File Edit Options View Tools Extensions Help 


Conexiones Cable personalizado de loT 


riny es||Fast Forward Time] E = SOEN o Re Iti 
APA AE EE ESPANA 


[SL £ > 
Bl IoT Custom Cable 
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c. Haga clic en RGB LED (LED RGB) y revise su especificación. Tenga en cuenta que diferentes entradas 
de pin representan distintos colores 


È 10T3 


Specifications Attributes 
tU U 


Direct Control: 
. N/A 
Local Control: 


+ Connect device to an MCU. From MCU, use "analogWrite" to adjust 
the LED color. 


Remote Control: 


+ N/A 


Data Specifications: 


+ Input Slot: 


AO [value range 0-1023] - Red 
A1 [value range 0-1023] - Green 
A2 [value range 0-1023] - Blue 


Example: 


NIJA 


Edit 


Advanced 


d. Abra el programa Blockly creado previamente. Haga clic en MCU > Programming (MCU > Programación). 


Debajo de la nota No Project Opened (No hay proyectos abiertos), haga clic en New (Nuevo). En la 
ventana Create Project (Crear proyecto), ingrese Blinking RGB LED (LED RGB parpadeante) como 


nombre del proyecto. En el menú desplegable Template (Plantilla), seleccione Blink — Visual (Parpadeo: 
visual). 
Y Mcu1 


Specifications Physical Config Programming Attributes 
No Project Opened 


New | Delete Rename Import Rur Clear Outputs Help 


Blink (JavaScript) 
Create Project x 
Enter a project name and select the project type. 


Name: Blinking RGB LED 


Q 


O Global Script Project 
MQTT Broker - (Python) + 


Create Cancel 
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e. Haga clic en Create (Crear). Haga doble clic en main.visual. Se muestra el programa Blockly creado 
previamente. 


$ mcur 


Specifications Physical Config Programming Attributes 


Blinking RGB LED (Visual) - main.visual_ : 
[Open | New| | Delete | | Rename | | Import | [Run | | Clear Outputs | | Help | 


> Program 
Pin Access , z UTPI 
pinMode slot IA OUTPUT y | 
Networking 6 
TCP print 2 Blinking +44 
UDP EY 0 while + [A true 7 | 
HTTP do 
Email 
loE Client CEL 1000 | 
Real HTTP 
Real TCP digitalWrite slot | Y | value | (1) 
Real UDP delay ms 500 
USB = 
Bluetooth 


digitalWrite slot í B value ' €B 


Paso 2: Modifique el programa Blockly 


a. Expanda el grupo Pin Access (Pin Access (Acceso a Pin)) y agregue dos bloques más pinMode para 
establecer tres casillas como OUTPUT (SALIDA) (en MCB para enviar una señal al LED RGB) 


A O E OUTPUT y | 
IA 1 MS OUTPUT y 
RN 2 MT OUTPUT y | 


b. En Pin Access group (Grupo de Pin Access (Acceso a Pin)), seleccione bloques analogWrite para 
reemplazar bloques digitalWrite. Además, agregue algunos bloques print (imprimir) 


print 2 Blinking Red +¿/ 
analogWrite slot ( (1 | value 
delay ms 000 
analogWrite slot | (1) | value 


delay ms 500 
02 Blinking Green E} 
analogWrite slot | Y | value 
EME 1000 | 
analogWrite slot | B | value 
EM 1500 | 
IS Blinking Blue +, 


analogWrite slot | (PY | value 


delay ms 1000 
analogWrite slot | (PY | value 


delay ms 500 
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c. El programa final es el siguiente: 


ES O Me OUTPUT y 
A 1 eS OUTPUT > 
pinMode slot | 2 | mode OUTPUT y 
repeat while > | true > 
BA Blinking Red Ez 
analogWrite slot | (1Y] | value 
delay ms 
analogWrite slot | (1 | value 
delay ms | 1500 
8 Blinking Green EZ, 
analogWrite slot ( B| value 
EM 1000 | 
analogWrite slot | E] | value 
delay ms 1500 
print 2 Blinking Blue 4 


analogWrite slot | 2 


S 


delay ms ff 


analogWrite 2 


delay ms | 1500. 


— 


d. Ejecute el programa. El LED debe aparecer de color ROJO, VERDE y AZUL en secuencia. 
Desafío 


Modifique el programa para mostrar una combinación de colores de las tres entradas con valores diferentes, 
generados de manera aleatoria, para cada ranura. 
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